<?php
/**
 * Created by PhpStorm.
 * User: linyh
 * Date: 2017/11/25 0025 10:13
 */
?>
<link href="/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="/css/dataTables.bootstrap.min.css">

<section class="content-header">
    <h1>
        设计提交
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="box box-default">
                <!-- /.box-header -->
                <!-- form start -->
                <form id="form" role="form" class="form-horizontal">
                    <div class="box-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1" class="col-sm-2 control-label">产品名称</label>
                            <div class="col-sm-9">
                            <input id="exampleInputEmail1" class="form-control" type="text" name="name" placeholder="请输入产品名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="input2" class="col-sm-2 control-label">设计师</label>
                            <div class="col-sm-9">
                            <select id="input2" class="form-control" name="designer_id">
                                <option value="" disabled selected>请选择设计师</option>
                            </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="input3" class="col-sm-2 control-label">产品配方</label>
                            <div class="col-sm-9">
                            <input id="input3" class="form-control" type="text" readonly data-toggle="modal" data-target="#modal-default">
                            </div>
                        </div>

                        <div class="modal fade" id="modal-default">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span></button>
                                         <h4 class="modal-title" style="text-align: center">选择原材料</h4>
                                    </div>
                                    <div class="modal-body">
                                        <table id="table" class="table table-bordered table-striped">
                                            <thead>
                                            <tr>
                                                <th>id</th>
                                                <th>属性</th>
                                                <th>名称</th>
                                                <th>成本</th>
                                                <th>库存</th>
                                                <th>单位</th>
                                                <th width="1%">数量</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-success" data-dismiss="modal">确认</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>

                        <div class="form-group">
                            <label for="input4" class="col-sm-2 control-label">配方成本</label>
                            <div class="col-sm-9">
                            <input id="input4" class="form-control" type="text" value="" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="myEditor"  class="col-sm-2 control-label">产品描述</label>
                            <div class="col-sm-10">
                            <script type="text/plain" name="description" id="myEditor" style="width:800px;height:240px;">
                                <p>请输入产品描述</p>
                            </script>
                            <!--</script>-->
                            </div>
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer" style="text-align: center">
                        <button type="submit" class="btn btn-success">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>


<script type="text/javascript" charset="utf-8" src="/ueditor/third-party/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/umeditor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

<script src="/js/jquery.dataTables.min.js"></script>
<script src="/js/dataTables.bootstrap.min.js"></script>

<script>
var um = UM.getEditor('myEditor');
var $table = $('#table');
var list = [];
$.ajax('/api/material/user-list', {
    type: 'GET',
    data: {
    },
    dataType: 'json',
    headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}
}).then(function(ret) {
    if(ret.state ==0) {
        var data = ret.data;

        for(var i in data.list) {
            var item = data.list[i];
            list.push({
                id: item.material.id,
                attr: item.material.attribute,
                name: item.material.name,
                price: item.material.price,
                num: item.storage_num,
                unit: item.material.unit,
                number: 0,
                type: 1,
            })
        }

        $.ajax('/api/product/user-list', {
            type: 'GET',
            data: {
            },
            dataType: 'json',
            headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}
        }).then(function(ret) {
            if(ret.state ==0) {
                var data2 = ret.data;

                for(var i in data2.list) {
                    var item = data2.list[i];
                    list.push({
                        id: item.product.id,
                        attr: item.product.is_material ? '原料型产品' : '非原料型产品',
                        name: item.product.name,
                        price: item.buy_price ? item.buy_price : item.product.material_cost,
                        num: item.num,
                        unit: '件',
                        number: 0,
                        type: 2,
                    })
                }

                console.log(list);
                $table.DataTable({
                    "columnDefs": [
                        {
                            "targets": 6,
                            "data": "title",
                            "render": function ( data, type, row, meta ) {
                                var rand = Math.random();
                                return '<input type="number" name="formula[' + rand + '][num]" min="1" class="formula_num" lk-id="' + row.id + '" lk-name="' + row.name + '" lk-price="' + row.price + '" lk-unit="' + row.unit +'"/>' +
                                    '<input type="hidden" name="formula[' + rand + '][type]" value="' + row.type + '"/>' +
                                    '<input type="hidden" name="formula[' + rand + '][entry_id]" value="' + row.id + '"/>';
                            }
                        },
                    ],
                    data: list,
                    columns: [
                        { data: 'id' },
                        { data: 'attr' },
                        { data: 'name' },
                        { data: 'price' },
                        { data: 'num' },
                        { data: 'unit' },
                        { data: 'number' },
                    ],
                    "lengthChange": false,
                    // "scrollY": "200px",
                    "scrollCollapse": true,
                    "paging": false,
                    'ordering'    : true,
                    'info'        : true,
                    'autoWidth'   : false
                })
                $("table tr th").css({"text-align":"center"});
                $("table").css({"text-align":"center"});
                $("table tr td input").css({"text-align":"center"});
            } else {
                alert(ret.message);
            }
        });
    } else {
        alert(ret.message);
    }
});


$.ajax('/api/member/list', {
    type: 'get',
    data: {
        position: 2,
    },
    dataType: 'json',
    headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}
}).then(function (ret) {
    for (var i in ret.data.list) {
        $('#input2').append($('<option>').attr('value', ret.data.list[i].id).text(ret.data.list[i].name));
    }
});

$(document).on('change', '.formula_num', function() {
    var totalCost = 0;
    var formula = '';
    $('.formula_num').each(function() {
        totalCost += $(this).val() * $(this).attr('lk-price')
        if($(this).val()) {
            formula += $(this).attr('lk-name') + '*' + $(this).val() + $(this).attr('lk-unit') + '; ';
        }
    });
    $('#input3').val(formula)
    $('#input4').val(totalCost)
})

$('#form').submit(function(e) {
    e.preventDefault();
    var str = $('#form').serialize();
    console.log(str);

    if(!parseFloat($('#input4').val())) {
        return alert('未选择配方');
    }


    $.ajax('/api/product/design', {
        type: 'POST',
        data: str,
        dataType: 'json',
        headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}
    }).then(function(ret) {
        if(ret.state ==0) {
            alert('保存成功');
            location.href = '/product/index';
        } else {
            alert(ret.message);
        }
    });
});

</script>